<template>
  <div id="MainComponent">
    <!-- <el-container class="max-demo">

      <el-menu default-active="1-1" class="el-menu-vertical-demo">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">Sunriz</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">驱动参数</el-menu-item>
            <router-link to="/hcdebug" replace style="text-decoration: none;">
              <el-menu-item index="1-2">Hc参数</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>
      </el-menu> -->



      <el-container class="right-demo">

          <el-header class="header-center">
        <!-- <h1>Hc参数</h1> -->
        <!-- <hr style="color: #ccc;"> -->
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          background-color="#fff" text-color="#000" active-text-color="102,177,255">
          <el-menu-item index="1" >
            驱动调试
          </el-menu-item>
          <el-menu-item index="2" @click.native="goToHcdebug">Hc调试</el-menu-item>
        </el-menu>
      </el-header>
         <el-main>
          <br>
          <br>
          <div class="control-row">
            <el-input v-model="input" placeholder="请输入需要打开的串口(示例:com4)" class="control-item" style="width: 250px;"></el-input>
            <el-button type="primary" class="control-item" @click="enableSerialPort">打开串口</el-button>
            <el-button type="danger" class="control-item" @click="disableSerialPort">关闭串口</el-button>
          </div>

          <div class="control-row">
            <el-input v-model="locationValue" placeholder="请输入目标位置" class="control-item" style="width: 200px;"></el-input>
            <el-button type="primary" class="control-item" @click="localtionModel">启动位置控制</el-button>
            <el-button type="primary" class="control-item" @click="returnOrigin">返回原点</el-button>
            <el-button type="danger" class="control-item" @click="findOrigin">寻找原点</el-button>
            <el-button type="danger" class="control-item" @click="motorclosed">关闭电机</el-button>
          </div>



          <br>
          <div class="flex-container">
            <div class="flex-item" style="flex: 4;">只读参数</div>
            <div class="flex-item" style="flex: 4;">读写参数</div>
          </div>
          <br>
          <!-- 使用Flex布局水平排列两个表格 -->
          <div class="flex-container" id="table1">

            <el-table :data="tableData" border style="width: 100%">
              <!-- <el-table-column prop="address" label="寄存器地址" width="180"> -->
              <!-- </el-table-column> -->
              <el-table-column prop="describe" label="寄存器地址含义  ">
              </el-table-column>
              <el-table-column prop="value" label="值" width="180">
              </el-table-column>
            </el-table>

            <!-- 添加一个竖线分隔两个表格 -->
            <div class="separator"></div>


            
            <el-table :data="tableData1" border style="width: 100%">
              <el-table-column prop="address" label="寄存器地址" width="180">
              </el-table-column>
              <el-table-column prop="value" label="值" width="180">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" @change="singleValue(scope.row)" @focus="clearThisTimeout()"
                    @blur="scheduleFetch('read');"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="describe" label="解释">
              </el-table-column>
            </el-table>

          </div>


        </el-main>
      </el-container>
    <!-- </el-container> -->
  </div>


</template>

<script>
import axios from 'axios';
import { Table, TableColumn } from 'element-ui';

export default {
  components: {
    'el-table': Table,
    'el-table-column': TableColumn
  },
  data() {
    return {
      input: '',
      locationValue:'',
      model:'',
      // 初始化tableData为数组
      tableData: [],
      tableData1: [], // 存储第二种数据的数组
      timeoutId: null, // 用于存储setTimeout的ID，以便在组件销毁时清除
      flag: false,
      activeIndex: '1'
    };
  },
  methods: {
    goToHcdebug() {
      this.$router.push('/hcdebug');
    },
    singleValue(row) {
      // this.$message('执行下发数据');
      const postData = {
        address: row.address, // 从当前行获取寄存器地址
        value: row.value  // 从当前行获取值
      };

      axios.post('http://localhost:8081/serialPort/setValue', postData)
        .then(response => {
          // 处理响应
          console.log(response);
          // 设置1秒的延迟
          this.timeoutId = setTimeout(() => {
          this.check06(postData);
      }, 500); 
    })
        .catch(error => {
          // 处理错误
          console.error('数据下发接口请求失败，请联系管理员', error);
        });
    },

    check06(addrAndValue) {
      axios.post('http://localhost:8081/serialPort/check06', addrAndValue)
        .then(response => {
          // 处理响应
          console.log(response);
          this.$message(response.data.message);
        })
        .catch(error => {
          // 处理错误
          console.error('数据检验接口请求失败，请联系管理员', error);
        });
    },

    motorclosed(){
      this.motorDebug(0);
    },
    localtionModel(){
      this.motorDebug(1);
    },
    returnOrigin(){
      this.motorDebug(2);
    },
    findOrigin(){
      this.motorDebug(3);
    }
    ,
    motorDebug(model){
      const postData = {
        model: model, // 从当前行获取寄存器地址
        value: this.locationValue  // 从当前行获取值
      };
      axios.post('http://localhost:8081/debug/setMotorModel', postData)
        .then(response => {
          // 处理响应
          console.log(response);
          this.$message(response.data.message);
        })
        .catch(error => {
          // 处理错误
          console.error('数据检验接口请求失败，请联系管理员', error);
        });
    }
    ,


    fetchData(type) {
      const url = type === 'read' ? 'http://localhost:8081/motor/timed/getRead' : 'http://localhost:8081/motor/timed/getReadAndWrite';
      return axios.get(url)
        .then(response => {
          const dataObj = response.data.data;
                // 根据address设置描述信息
            const tableData = Object.keys(dataObj).map(address => {
            const describe = this.getDescribeByAddress(address);
            return {
              address: address,
              value: dataObj[address],
              // 这里可以根据实际情况提供描述信息
              describe: describe
            };
          });
          if (type === 'read') {
            this.tableData = tableData;
          } else {
            this.tableData1 = tableData;
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });
    },

  

// 根据address获取描述信息的方法
getDescribeByAddress(address) {
  switch(address) {
    // address是字符串类型
    case '2': 
    case '3': 
    case '4': 
    case '5': 
    case '6': 
    return '协议地址偏移';
    // 可以添加更多的case来匹配不同的address

    case '7':
    case '8':
    case '10':
      return '校验使用';

    case '100':
      return '执行从 FLASH 中读取配置参数';

    case '101':
      return '执行将配置参数保存到 FLASH 中';



    default:
      return '暂无解释'; // 如果address不匹配任何case，返回默认解释
  }
},

    // 打开指定串口
    enableSerialPort() {
      // 假设你已经有一个函数来获取端口号，这里用this.input代替
      const port = this.input;

      // 发起GET请求
      axios.get(`http://localhost:8081/serialPort/enable/motor/${port}`)
        .then(response => {
          // 接口调用成功
          console.log(response.data);
          // 弹出提示框
          this.$message(response.data.message);

          // 开始请求数据
          // todo 记得开启
          this.scheduleFetch('read');
        })
        .catch(error => {
          // 接口调用失败
          console.error('Error:', error);
          // 这里可以根据需要处理错误
        });
    },

    // 关闭串口
    disableSerialPort() {
      // 发起GET请求
      axios.get(`http://localhost:8081/serialPort/disable`)
        .then(response => {
          // 接口调用成功
          console.log(response.data);
          // 这里可以根据需要处理响应数据
          this.$message(response.data.message);
          // 串口关闭后，清除定时器
          this.clearThisTimeout();
        })
        .catch(error => {
          // 接口调用失败
          console.error('Error:', error);
          // 这里可以根据需要处理错误
        });
    },

    clearThisTimeout() {
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
        this.timeoutId = null; // 重置timeoutId
      }
    }
    ,
    scheduleFetch(type) {
      // 清除之前的定时器
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }
      // 执行请求
      this.fetchData(type)
        .then(() => {
          // 1秒后执行下一个请求类型
          this.timeoutId = setTimeout(() => {
            this.scheduleFetch(type === 'read' ? 'readAndWrite' : 'read');
          }, 2000);
        });
    }
  },
  // 钩子函数
  mounted() {
    console.log("start");
    // Vue组件挂载后立即调用fetchData方法
    // this.scheduleFetch('read');
    // 设置定时器，交替执行fetchData
    // this.intervalId = setInterval(() => {
    //   this.scheduleFetch('read');
    // }, 5000);
  },
  beforeDestroy() {
    this.disableSerialPort();
    this.clearThisTimeout();
    // Vue组件销毁前清除定时器和timeoutId
    if (this.timeoutId) {
      
        clearTimeout(this.timeoutId);
        this.timeoutId = null; // 重置timeoutId
      }
  }
};

</script>

<style scope>
.max-demo{
  display: flex;
}

.el-menu-vertical-demo {
  width: 10%;
  height:100%;
  /* min-height: 400px; */
}

.right-demo{
  width: 90%;
}

.header-center {
  text-align: center;
  line-height: 60px;
}

.flex-item {
  /* 使用flex-grow来分配空间，第一个元素为1，第二个为3，共4份 */
  flex: 1;
  text-align: center;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  /* 水平排列两个表格 */
  align-items: flex-start;
  /* 垂直对齐方式 */
}

.flex-container .el-table {
  width: calc(50% - 2px);
  /* 减去分隔线的宽度 */
  margin-right: -1px;
  /* 使表格边框合并 */
}

/* 添加竖线样式 */
.separator {
  width: 2px;
  /* 竖线的宽度 */
  background-color: #e6e6e6;
  margin: 0 10px;
  /* 根据需要调整margin以适应布局 */
}

.button-container {
  display: flex;
  justify-content: flex-end;
}
</style>
